<template>
    <div class="monitoring-report-container">
        <!-- 标题组件 -->
        <Title :title="title"></Title>
        <!-- 图表容器：固定高度+溢出隐藏，彻底防止放大 -->
        <div ref="barContainer" class="bar-container"></div>
    </div>
</template>

<script>
import { Bar } from '@antv/g2plot';
import Title from './Title.vue'; // 确保Title组件路径正确

export default {
    components: { Title },
    data() {
        return {
            title: '监测月报',
            barPlot: null,
            chartData: [
                { label: 'Mon.', type: 'series1', value: 2800 },
                { label: 'Mon.', type: 'series2', value: 2260 },
                { label: 'Tues.', type: 'series1', value: 1800 },
                { label: 'Tues.', type: 'series2', value: 1300 },
                { label: 'Wed.', type: 'series1', value: 950 },
                { label: 'Wed.', type: 'series2', value: 900 },
                { label: 'Thur.', type: 'series1', value: 500 },
                { label: 'Thur.', type: 'series2', value: 390 },
                { label: 'Fri.', type: 'series1', value: 170 },
                { label: 'Fri.', type: 'series2', value: 100 },
            ],
            resizeTimeout: null // 节流定时器，防止频繁调整尺寸
        };
    },
    methods: {
        initBarChart() {
            const container = this.$refs.barContainer;
            if (!container) {
                console.error('图表容器不存在！');
                return;
            }

            // 1. 销毁旧实例：避免重复创建导致尺寸叠加
            if (this.barPlot) {
                this.barPlot.destroy();
                this.barPlot = null;
            }

            try {
                this.barPlot = new Bar(container, {
                    data: this.chartData,
                    isGroup: true,
                    xField: 'value',
                    yField: 'label',
                    seriesField: 'type',
                    marginRatio: 0,
                    // 2. 禁用自动适配：防止图表自行放大
                    autoFit: false,
                    label: {
                        position: 'right',
                        offset: 4,
                        style: { fill: '#fff' }
                    },
                    // barStyle: { radius: [2, 2, 0, 0] },
                    // color: ['#165DFF', '#36CFC9'],
                    // xAxis: {
                    //     label: { style: { fill: '#fff' } },
                    //     line: { style: { stroke: '#4E5969' } },
                    //     tickLine: { style: { stroke: '#4E5969' } }
                    // },
                    // yAxis: {
                    //     label: { style: { fill: '#fff' } },
                    //     line: { style: { stroke: '#4E5969' } },
                    //     tickLine: { style: { stroke: '#4E5969' } }
                    // },
                    // legend: {
                    //     position: 'top',
                    //     itemName: { style: { fill: '#fff' } }
                    // }
                });

                // 3. 手动锁定尺寸：与容器固定尺寸完全一致
                const { clientWidth, clientHeight } = container;
                this.barPlot.changeSize(clientWidth, clientHeight);
                this.barPlot.render();
            } catch (err) {
                console.error('图表初始化失败：', err);
            }
        },

        // 4. resize节流：500ms内只执行一次，避免频繁放大
        handleResize() {
            clearTimeout(this.resizeTimeout);
            this.resizeTimeout = setTimeout(() => {
                if (this.barPlot && this.$refs.barContainer) {
                    const { clientWidth, clientHeight } = this.$refs.barContainer;
                    // 只在尺寸有效时调整（防止0尺寸导致异常）
                    if (clientWidth > 0 && clientHeight > 0) {
                        this.barPlot.changeSize(clientWidth, clientHeight);
                    }
                }
            }, 500);
        }
    },
    mounted() {
        // 5. DOM加载完成后初始化（只执行一次）
        this.$nextTick(() => {
            this.initBarChart();
        });

        // 6. 监听窗口resize（带节流）
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 7. 彻底清理资源：防止内存泄漏
        clearTimeout(this.resizeTimeout);
        window.removeEventListener('resize', this.handleResize);
        if (this.barPlot) {
            this.barPlot.destroy();
        }
    }
};
</script>

<style lang="less" scoped>
/* 8. 父容器：固定总高度+溢出隐藏，杜绝动态放大 */
.monitoring-report-container {
    width: 100%;
    height: 320px;
    /* 固定总高度（标题+图表），不依赖任何动态百分比 */
    padding: 10px;
    box-sizing: border-box;
    background: #0F172A;
    overflow: hidden;
    /* 即使内容异常，也强制隐藏溢出部分 */
}

/* 9. 图表容器：固定高度，与父容器高度匹配 */
.bar-container {
    width: 100%;
    height: 260px;
    /* 固定图表高度（总高度320px - 标题高度~60px） */
    overflow: hidden;
    /* 防止图表内部元素溢出 */
}
</style>
